<template>
  <div class="container">
    <div class="invitationbg"></div>
    <div class="content">
      <div class="yiyaoqing">
        <h3>您成功邀请的{{statistics.total || 0}}名好友共帮您挖了</h3>
        <h4><span>{{(statistics.awardSum && (statistics.awardSum/100000000).toFixed(2)) || 0}}</span><em>服豆</em></h4>
      </div>
      <div class="searchList">
        <a href="javascript:;" class="search" @click="searchx()"></a>
        <div class="sumlist">
          <div class="item" v-for="(item, index) in clist" :key="index">
            <div class="hadeImg">
              <img :src="item.uid ? 'https://cj-pub.obs.myhwclouds.com/header/' + item.uid :'../../../static/img/headimg.jpg'" alt="">
            </div>
            <div class="name">{{item.inviteUser.nick}}</div>
            <time>+{{(item.award && (item.award/100000000).toFixed(2)) || 0}}服豆</time>
          </div>
          <div class="item" v-if="dowmOk"><a href="javascript:;" @click="download">下拉加载更多……</a></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import cookie from '../../plugin/cookie'
export default {
  name: 'HelloWorld',
  data () {
    return {
      statistics: {},
      clist: [],
      pageNo: 1,
      pageSize: 8,
      pages: 1,
      dowmOk: true,
      token: '',
      tokens: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJMaXV1SG9uZyIsImF1ZCI6IjEwNDE3OTQ0MjkyOTMxNjY1OTIiLCJuYmYiOjE1NDUyNzI5OTUsInJvbGVzIjoiVVNFUixVU0VSX1BFIiwiaXNzIjoidGIuY24iLCJpZCI6IjEwNDE3OTQ0MjkyOTMxNjY1OTIiLCJleHAiOjE1NjA4MjQ5OTUsImlhdCI6MTU0NTI3Mjk5NX0.WR56qCta8tDxy-YMC8asxuUuMre_N1ULlRErwgHmRjk'
    }
  },
  mounted () {
    document.title = '邀请列表';
    window.addEventListener('scroll', this.handleScroll)
    window.getToken = this.getToken
    if (cookie.get('token')) {
      this.getToken(cookie.get('token'))
    }
  },
  methods: {
    // 滚动条事件
    handleScroll () {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      let windowHeight = document.body.clientHeight
      let bodyHeight = window.screen.height

      if ((windowHeight - bodyHeight) < (scrollTop + 10)) {
        if (this.dowmOk) {
          this.dowmOk = false
          this.download()
        }
      }
    },
    getToken (token) {
      this.token = token
      this.start(token)
    },
    // 加载
    download () {
      this.pageNo++
      this.start(this.token)
    },
    searchx () {
      if (this.isMobileDevice() === 0)
        window.webkit.messageHandlers.searchx.postMessage();
      else
        window.App.searchx()
    },
    /**
     * @deprecated 分页查询
     */
    start (token) {
      this.$fetch({
        url: '/crm/invites?pageNo=' + this.pageNo + '&pageSize=' + this.pageSize,
        headers: {
          'Authorization': token
        }
      }).then(res => {
        if (this.pageNo < res.pages) {
          this.dowmOk = true
        }
        this.pages = res.pages
        res.data.forEach(item => {
          this.clist.push(item)
        })
      }).catch(res => {
        this.$tipMessage(res.message);
      })

      /**
       * @deprecated 统计接口
       */
      this.$fetch({
        url: '/crm/invite/mytotal',
        headers: {
          'Authorization': token
        }
      }).then(res => {
        this.statistics = res.data
      })
    }
  }
}
</script>
<style scoped lang='less' type="text/less" rel="stylesheet/less">
.yt-textEll{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.invitationbg{
  width: 7.5rem;
  height: 4.78rem;
  background: url("../../assets/image/invitationbg.png") no-repeat 0 0;
  background-size: 100%;
}
.container{
  background: url("../../assets/image/invitationdbg.jpg") repeat-y 0 0;
  background-size: 100%;
  padding-bottom: .2rem;
}
.content{
  padding: 0 .32rem;
  .yiyaoqing{
    width: 6.86rem;
    height: 1.38rem;
    border-top: .1rem solid #FAD58A;
    border-radius: .08rem;
    background: #fff;
    padding-top: .25rem;
    h3{
      font-size: .32rem;
      line-height: .42rem;
      color: #333333;
      font-weight: 400;
      text-align: center;
    }
    h4{
      text-align: center;
      font-size: .48rem;
      color: #f13535;
      margin-top: .1rem;
      span{
        font-size: .48rem;
      }
      em{
        font-weight: 400;
        margin-left: .1rem;
        font-size: .24rem;
        font-style: normal;
      }
    }
  }
}
.searchList{
  margin-top: .32rem;
  width: 6.86rem;
  min-height: 8rem;
  overflow-y: auto;
  border-top: .1rem solid #FAD58A;
  border-radius: .08rem;
  background: #fff;
  .search{
    display: block;
    width: 6.86rem;
    height: 1.04rem;
    background: url("../../assets/image/searchImg.jpg") no-repeat 0 0;
    background-size: 100%;
  }
  .sumlist{
    padding: 0 .32rem;
    .item{
      padding: .32rem 0;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 0;
      .hadeImg{
        width: .72rem;
        height: .72rem;
        border-radius: 50%;
        margin-right: .2rem;
        img{
          width: .72rem;
          height: .72rem;
          border-radius: 50%;
        }
      }
      .name{
        width: 2.6rem;
        padding-left: .2rem;
        font-size: .32rem;
        color: #333333;
        .yt-textEll;
      }
      time{
        width: 2.6rem;
        text-align: right;
        font-size: .32rem;
        color: #F13535;
        .yt-textEll;
      }
      a{
        font-size: .24rem;
        color: #666666;
        text-decoration: none;
      }
    }
  }
}
</style>
